<template>
	<div>
		<div>Obj: {{ count }}==={{ obj }}</div>
		<button @click="handleClick">修改数据</button>
		<div>
			自定义ref(customRef): {{ msg }}
			<el-input v-model="msg"></el-input>
		</div>
		<Teleport to=".son">
			<h1>我是传送门teleport</h1>
		</Teleport>
	</div>
</template>
<script lang="ts" setup>
import useMsg from '@/hooks/useMsg';
const { msg } = useMsg('hello world', 500);
const count = ref(1000)
const obj = reactive({
	name: '张三',
	age: 100,
	gender: '男',
	info: {
		name: '王麻子'
	}
})
const count2 = {
	value: 1000
};
const handleClick = () => {
	count.value += 1
	obj.info.name = '李123213213213123四'
	// Object.assign(obj, {
	// 	name: '李四',
	// 	age: 200,
	// 	gender: '男',
	// })
}
console.log('toRaw===', obj)
console.log('toRaw===', toRaw(obj))
console.log('markRaw===', markRaw(count2))



</script>
